<template>
	<div class="wrap" :style="{height:height}">
		<mpvue-echarts ref="myChart"  :echarts="echarts" @emitInfos="emitInfos" canvasId="line" class="charts" />
	</div>
</template>

<script>
import * as echarts from "./mpvue-echarts/src/echarts.min.js";
import mpvueEcharts from "./mpvue-echarts";
export default {
	components: {mpvueEcharts},
	data() {
		return {
			echarts,
			onInit:{},
			chartInfo:{}
		};
	},
	props:{
		chartOption:{
			type:Object,
			default:()=>({})
		},
		height:{
			type:String,
			default:'800rpx'
		}
	},
	methods: {
		emitInfos(info, callback){
			const chart = echarts.init(info.canvas, null, {width: info.width, height: info.height,});
			info.canvas.setChart(chart);
			chart.setOption(this.chartOption);
			callback && callback(chart)
		},
	}
}
</script>

<style lang="scss" scoped>
.wrap {
	width: 100%;
	height: 600px;
	.charts{
		width: 100%;
		height: 100%;
	}
	
}
</style>

